<template>
  <header class="header">
    <nav class="navbar">
      <div class="container">
        <div class="nav_posi">
          <div class="flex_between">
            <div class="navbar-brand">
              <nuxt-link to="/">
                <div class="brand fw700  f-24">Savinginsta</div>
              </nuxt-link>
            </div>
            <div class="navbar-collapse shou">
              <div class="flex_ dropdown" @click.stop="openBtn = !openBtn">
                <div class="c-000 f-18">{{ list[current] }}</div>
                <div class="dropdownImg" v-if="!openBtn"></div>
                <div class="dropdownImg-up" v-else></div>
              </div>
              <div
                class="dropdown-app c-000"
                @click.stop="openBtn = !openBtn"
              ></div>
            </div>
          </div>
          <div class="language-content flex_between" v-show="openBtn">
            <div
              class="item"
              :class="current == k ? 'changeItem' : ''"
              :key="k"
              v-for="(item, k) in list"
              @click.prevent="changeLanguage($event, item, k)"
            >
              <a :lang="list1[k]" :href="currentPath(k)">
                {{ item }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>
  
  <script>
import { mapState, mapGetters, mapMutations } from "vuex";
import { handleClick, checkString } from "@/plugins/Firebase.js";
export default {
  computed: {
    ...mapGetters(["language"]),
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    path() {
      if (this.$route.path.length < 2) {
        return "en";
      } else {
        return this.$route.path.substring(1, 3);
      }
    },
  },
  mounted() {
    if (process.client) {
      if (!localStorage.getItem("language")) {
        localStorage.setItem("language", "en");
        this.setLanguageHandel("en");
      } else {
        this.setLanguageHandel(localStorage.getItem("language"));
      }
    }
  },
  data() {
    return {
      openBtn: false,
      openBtnApp: false,
      appLanguage: false,
      list: [
        "English", // 英语
        "Bahasa Indonesia", // 印度尼西亚语
        "Tiếng Việt", // 越南语
        "Bahasa Malaysia", // 马来语
        "Basa Jawa", // 爪哇语
        "Čeština", // 捷克语
        "Español", // 西班牙语
        "Français", // 法语
        "German", // 德语
        "Italian", // 意大利语
        "Magyar", // 匈牙利语
        "Nederlands", // 荷兰语
        "Polish", // 波兰语
        "Português", // 葡萄牙语
        "Română", // 罗马尼亚语
        "Thailand", // 泰语
        "Turkish (Turkey)", // 土耳其语
        "Ελληνικά", // 希腊语
        "украї́нська мо́ва", // 乌克兰语
        "Русский", // 俄语
        "عَرَبِيّ", // 阿拉伯语
        "한국어", // 韩语
        "日本語", // 日语
      ],
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },

  props: {
    pageType: {
      type: Boolean,
      required: false,
    },
  },
  methods: {
    ...mapMutations(["setLanguage"]),
    setLanguageHandel(lang) {
      this.setLanguage(lang);
    },
    currentPath(k) {
      if (this.list1[k] == "en") {
        return "https://savinginsta.com/";
      } else {
        return "https://savinginsta.com/" + this.list1[k];
      }
    },
    changeLanguage(event, item, k) {
      event.preventDefault(); // 抑制默认的链接行为
      localStorage.setItem("language", this.list1[k]);
      this.setLanguage(this.list1[k]);
      this.openBtn = false;
      this.$nextTick(() => {
        window.location.href = this.currentPath(k);
      });
      //切换语言
      handleClick("action_language_switch", {
        site: this.list1[k],
      });
    },
    changeOpenBtn() {
      this.openBtn = !this.openBtn;
    },
    closeApp() {
      this.appLanguage = !this.appLanguage;
      this.openBtnApp = !this.openBtnApp;
    },
    close() {
      this.openBtn = false;
      this.openBtnApp = false;
      this.appLanguage = false;
    },
  },
};
</script>
  <style lang="scss" scoped>
.header {
  background-color: #fff;
  .navbar {
    border-bottom: 1px solid #f2f0f7;
  }
  .nav_posi {
    position: relative;
  }
  .container {
    .navbar-brand {
      .brand {
        padding: 20px 0;
        background: linear-gradient(
          242deg,
          #ffbc68 0%,
          #ff4aaa 49%,
          #6b46ff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-right: 8px;
      }
    }
    .app-dropdown {
    }
    .navbar-collapse {
      position: relative;
      .dropdown {
        .dropdownImg {
          margin-top: 4px;
          margin-left: 10px;
          width: 20px;
          height: 20px;
          background-image: url("@/static/images/dropdown.webp");
          /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .dropdownImg-up {
          margin-top: 4px;
          margin-left: 10px;
          width: 20px;
          height: 20px;
          background-image: url("@/static/images/dropdown-up.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
      }
      .dropdown-app {
        display: none;
      }
    }
    .language-content {
      position: absolute;
      right: 0px;
      top: 60px;
      padding: 6px 20px;
      padding-right: 0;
      padding-left: 34px;
      width: 327px;
      border-radius: 8px;
      border: 1px solid #d9d9d9;
      flex-wrap: wrap;
      background: #fff;
      z-index: 9999;
      .item {
        z-index: 9999;
        color: #1d212c;
        font-size: 14px;
        width: 50%;
        margin: 12px 0;
      }
      .changeItem {
        color: #433aff;
      }
    }
  }
}
// 宽度小于768
@media (max-width: 768px) {
  .container {
    padding: 0 14px;

    .navbar-brand {
      .brand {
        padding: 14px 0 !important;
        background: linear-gradient(
          242deg,
          #ffbc68 0%,
          #ff4aaa 49%,
          #6b46ff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-right: 8px;
        font-size: 18px !important;
      }
    }
    .navbar-collapse {
      .dropdown {
        display: none !important;
        .dropdownImg {
          margin-left: 10px;
          width: 20px;
          height: 20px;
          background-image: url("@/static/images/dropdown.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .dropdownImg-up {
          margin-left: 10px;
          width: 20px;
          height: 20px;
          background-image: url("@/static/images/dropdown-up.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
      }
      .dropdown-app {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("@/static/images/drawer.webp");
        /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
        background-size: contain !important;
        background-repeat: no-repeat;
      }
    }
  }
  .language-content {
    position: static !important;
    padding-top: 0px !important;
    padding-bottom: 10px;
    color: #433aff;
    font-size: 16px;
    font-weight: 400;
    flex-wrap: wrap;
    width: 100% !important;
    border: 0 !important;
    padding-left: 0 !important;

    .item {
      z-index: 9999;
      color: #1d212c;
      font-size: 14px;
      width: 50%;
      margin: 12px 0;
    }
  }
}
</style>
  